<template>
  <div class="login">
    <byd-header />

    <div class="body">
      <div class="shell">
        <div class="top">
          <span class="off">登录</span>
          <div class="button" @click="a()">
            <div class="ball"></div>
          </div>
          <span class="on">注册</span>
        </div>

        <div class="bottom">
          <div class="signIn">
            <h2>登录</h2>

            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
            >
              <el-form-item
                class="el-menu-item1"
                :label="'电\u2002\u2002\u2002\u2002话:'"
                prop="phone"
                hide-required-asterisk="true"
                maxlength="11"
              >
                <el-input
                  type="userPhone"
                  maxlength="11"
                  v-model="ruleForm.phone"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item
                class="el-menu-item1"
                :label="'密\u2002\u2002\u2002\u2002码:'"
                prop="pwd"
              >
                <el-input
                  maxlength="12"
                  minlength="6"
                  show-password
                  type="password"
                  v-model="ruleForm.pwd"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item>
                <el-button
                  class="head_btn"
                  type="primary"
                  @click="onSubmit1(ruleForm)"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="signUp">
            <h2>注册</h2>

            <el-form
              :model="ruleForm2"
              :rules="rules2"
              ref="ruleForm2"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item
                class="el-menu-item1"
                :label="'电\u2002\u2002\u2002\u2002话: '"
                hide-required-asterisk="true"
                prop="phone"
              >
                <el-input
                  type="userPhone"
                  maxlength="11"
                  v-model="ruleForm2.phone"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item
                class="el-menu-item1"
                :label="'密\u2002\u2002\u2002\u2002码: '"
                prop="pwd"
              >
                <el-input
                  maxlength="12"
                  minlength="6"
                  type="password"
                  show-password
                  v-model="ruleForm2.pwd"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item
                class="el-menu-item1"
                label="确认密码: "
                prop="repwd"
              >
                <el-input
                  maxlength="12"
                  minlength="6"
                  type="password"
                  show-password
                  v-model="ruleForm2.repwd"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  class="head_btn"
                  @click="onSubmit2(ruleForm2)"
                  >注册</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
   
   
  </div>
</template>

<script>
import BydHeader from "@/components/BydHeader.vue";
import qs from "qs";
export default {
  components: { BydHeader },

  data() {
    // ****登录验证****
    var validatePhone = (rule, value, callback) => {
      let regs = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else {
        if (this.ruleForm.checkPass !== "" && !regs.test(this.ruleForm.phone)) {
          this.$refs.ruleForm.validateField("checkPhone");
          callback(new Error("请输入正确的手机号"));
        }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      let regs = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/;

      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "" && !regs.test(this.ruleForm.pwd)) {
          this.$refs.ruleForm.validateField("checkPass");
          callback(new Error("6-12位数字与字母的组合"));
        }
        callback();
      }
    };
    // ****注册验证****
    var validatePhone2 = (rule, value, callback) => {
      let regs = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else {
        if (
          this.ruleForm2.checkPass !== "" &&
          !regs.test(this.ruleForm2.phone)
        ) {
          this.$refs.ruleForm2.validateField("checkPhone");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      let regs = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm2.checkPass !== "" && !regs.test(this.ruleForm2.pwd)) {
          this.$refs.ruleForm2.validateField("checkPass");
          callback(new Error("6-12位数字与字母的组合"));
        }
        callback();
      }
    };
    var validatePass3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.pwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      index: true,

      // 登录
      ruleForm: {
        phone: "",
        pwd: "",
      },
      rules: {
        phone: [{ validator: validatePhone, trigger: "blur" }],
        pwd: [{ validator: validatePass, trigger: "blur" }],
      },
      // 注册
      ruleForm2: {
        phone: "",
        pwd: "",
        repwd: "",
      },
      rules2: {
        phone: [{ validator: validatePhone2, trigger: "blur" }],
        pwd: [{ validator: validatePass2, trigger: "blur" }],
        repwd: [{ validator: validatePass3, trigger: "blur" }],
      },
    };
  },

  methods: {
    // 登录
    onSubmit1() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return;
        // console.log("登录成功");

        this.axios
          .get(`/login/${this.ruleForm.phone}/${this.ruleForm.pwd}`)
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: "欢迎登录,比亚迪海豹!",
                type: "success",
                center: true,
                duration: 2000,
              });
              // 存进全局共享里
              this.$store.commit("getPhone", this.ruleForm.phone);
              sessionStorage.setItem("pic", 6);
              this.$router.push('/')
            } else {
              this.$message({
                message: "电话或密码错误,请重新登录!",
                type: "error",
                center: true,
                duration: 2000,
              });
            }
          });
      });
    },

    // 注册
    onSubmit2() {
      this.$refs.ruleForm2.validate((valid) => {
        if (!valid) return;
        this.axios
          .post("/register", qs.stringify(this.ruleForm2))
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: "注册成功,请登录!",
                type: "success",
                center: true,
              });
              this.index=!this.index
            } else {
              this.$message({
                message: "该用户已注册",
                type: "error",
                center: true,
              });
            }
            this.ruleForm.phone=this.ruleForm2.phone
            // this.ruleForm.pwd=this.ruleForm2.pwd
            this.ruleForm2.phone = "";
            this.ruleForm2.pwd = "";
            this.ruleForm2.repwd = "";

          });
      });
    },

    a() {
      this.index = !this.index;
      // console.log(this.index);
    },

    login() {
      // console.log("aaaaaa");
      // let button = document.querySelector(".button");
      let ball = document.querySelector(".ball");
      let bottom = document.querySelector(".bottom");
      let off = document.querySelector(".off");
      let on = document.querySelector(".on");

      if (!this.index) {
        ball.style.left = 61 + "%";
        on.style.opacity = 1;
        off.style.opacity = 0.8;
        bottom.style.transform = "rotateY(180deg)";
      } else {
        ball.style.left = 0;
        on.style.opacity = 0.8;
        off.style.opacity = 1;
        bottom.style.transform = "rotateY(0deg)";
      }
    },
  },
  watch: {
    data(newValue, oldValue) {},
    index(to, from) {
      this.login();
    },
  },
};
</script>


<style scoped>
* {
  padding: 0;
  margin: 0;
  outline: none;
  border: none;
}
.body {
  height: calc(100vh - 80px);
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../../public/pic/login/背景1.jpg");
  background-size: cover;                    /*???????????????????????????????*/ 
}

.shell {
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  perspective: 1000px;
}

.top {
  width: 300px;
  display: flex;
  cursor: pointer;
  justify-content: space-evenly;
}

.off,
.on {
  color: #fff;
  transition: 0.5s;
  font: 300 20px "";
}
.on {
  opacity: 0.5;
}
.button {
  width: 60px;
  height: 25px;
  background-color: #545c64;
  border-radius: 20px;
  position: relative;
}

.ball {
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: #00b1a9;
  border-radius: 50%;
  transition: 0.5s;
  box-shadow: 0 0 5px #00b1a9;
  left: 0;
  transform: translate(-1px);
}

.bottom {
  width: 450px;
  height: 400px;
  background-color: #545c64;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.452);
  background-repeat: no-repeat;
  background-size: 100%;
  margin-top: 30px;
  transform-style: preserve-3d;
  position: relative;
  transition: 0.7s;
  border-radius: 5px;
}

.bottom > div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  color: #fff;
}

.bottom > div button {
  width: 80px;
  height: 30px;
  color: #fff;
  font-size: 15px;
  background-color: #00b1a9;
  border-radius: 4px;
  transition: 0.3s;
  margin-bottom: 10px;
  cursor: pointer;
  box-shadow: 0 0 5px #00b1a9;
}

.signIn {
  transform: translateZ(70px);
}

.signUp {
  position: absolute;
  top: 0;
  transform: translateZ(-70px) rotateY(180deg);
}

.el-menu-item1[data-v-26084dc2] {
  margin-left: -40px;
  margin-bottom: 20px;
  width: 120%;
}
.head_btn {
  margin-right: 100px;
}

/* 背景图 */
.slidershow {
  position: absolute;
  width: 100vw;
  height: calc(100vh - 80px);
  overflow: hidden;
}

.slidershow--image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
  -webkit-animation-name: kenburns;
  animation-name: kenburns;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-duration: 16s;
  animation-duration: 16s;
  opacity: 1;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.slidershow--image:nth-child(1) {
  -webkit-animation-name: kenburns-1;
  animation-name: kenburns-1;
  z-index: 3;
}

.slidershow--image:nth-child(2) {
  -webkit-animation-name: kenburns-2;
  animation-name: kenburns-2;
  z-index: 2;
}

.slidershow--image:nth-child(3) {
  -webkit-animation-name: kenburns-3;
  animation-name: kenburns-3;
  z-index: 1;
}

.slidershow--image:nth-child(4) {
  -webkit-animation-name: kenburns-4;
  animation-name: kenburns-4;
  z-index: 0;
}

@-webkit-keyframes kenburns-1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  1.5625% {
    opacity: 1;
  }
  23.4375% {
    opacity: 1;
  }
  26.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  98.4375% {
    opacity: 0;
    -webkit-transform: scale(1.21176);
    transform: scale(1.21176);
  }
  100% {
    opacity: 1;
  }
}

@keyframes kenburns-1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  1.5625% {
    opacity: 1;
  }
  23.4375% {
    opacity: 1;
  }
  26.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  98.4375% {
    opacity: 0;
    -webkit-transform: scale(1.21176);
    transform: scale(1.21176);
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes kenburns-2 {
  23.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  26.5625% {
    opacity: 1;
  }
  48.4375% {
    opacity: 1;
  }
  51.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@keyframes kenburns-2 {
  23.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  26.5625% {
    opacity: 1;
  }
  48.4375% {
    opacity: 1;
  }
  51.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@-webkit-keyframes kenburns-3 {
  48.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  51.5625% {
    opacity: 1;
  }
  73.4375% {
    opacity: 1;
  }
  76.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@keyframes kenburns-3 {
  48.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  51.5625% {
    opacity: 1;
  }
  73.4375% {
    opacity: 1;
  }
  76.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@-webkit-keyframes kenburns-4 {
  73.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  76.5625% {
    opacity: 1;
  }
  98.4375% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes kenburns-4 {
  73.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  76.5625% {
    opacity: 1;
  }
  98.4375% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
</style>
<style>
.el-form-item__label {
  color: #fff !important;
}
</style>
